<body>
    <b>Pick your house!</b>
    <br />
    <input type=radio id=gryffindor name=hp value=Gryffindor>
    <label for=gryffindor>Gryffindor</label>
    <br />
    <input type=radio id=hufflepuff name=hp value=Hufflepuff>
    <label for=hufflepuff>Hufflepuff</label>
    <br />
    <input type=radio id=ravenclaw name=hp value=Ravenclaw>
    <label for=ravenclaw>Ravenclaw</label>
    <br />
    <input type=radio id=slytherin name=hp value=Slytherin>
    <label for=slytherin>Slytherin</label>

    <br />
    <br />

    <b>Pick your other house!</b>
    <br />
    <input type=radio id=stark name=got value=Stark>
    <label for=stark>Stark</label>
    <br />
    <input type=radio id=lannister name=got value=Lannister>
    <label for=lannister>Lannister</label>
    <br />
    <input type=radio id=baratheon name=got value=Baratheon>
    <label for=baratheon>Baratheon</label>
    <br />
    <input type=radio id=targaryen name=got value=Targaryen>
    <label for=targaryen>Targaryen</label>

    <br />
    <br />

    <b>Selected</b>
    <br />
    <div style="display: inline-block;">
        <pre>HP house: <span id=hp></span></pre>
        <pre>GoT house: <span id=got></span></pre>
    </div>

    <script>
        const hp = document.getElementsByName('hp');
        for (let i = 0; i < hp.length; ++i) {
            hp[i].addEventListener('change', function() {
                if (this.checked) {
                    document.getElementById('hp').innerHTML = this.value;
                }
            });
        }

        const got = document.getElementsByName('got');
        for (let i = 0; i < got.length; ++i) {
            got[i].addEventListener('change', function() {
                if (this.checked) {
                    document.getElementById('got').innerHTML = this.value;
                }
            });
        }
    </script>
</body>
